<template>
  <div id="fir">
    <h1>创建计划</h1>
    <label>账户</label>
    <input @blur="linkJq" id="testJq" type="text" placeholder="请输入名称"/>
    <button class="btn btn-default" type="submit" data-toggle="modal" data-target="#myModal">bootstrap</button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import $ from 'jquery'

  export default {
    name: 'fir',
    id: 'fir',
    methods: {
      linkJq: function () {
        console.log($('.btn').eq(0).text())
      }
    },
    mounted: function () {
      $('.btn').on('click', function () {
        alert('1')
      })
    }
  }
</script>

<style scoped>
  #fir {
    background: greenyellow;
  }
</style>
